<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import DrawingBoard from '@/components/DrawingBoard/index.vue'
defineOptions({
  name: 'RotateDrawingBoard'
})


let speed = ref(1);
let animate:any = null;
let drawingBoard = ref<any>(null)


function start():void{
  if(!animate){
    speed.value = 1;
    rotate();

  }
}

/**
 * 停止
 */
function stop():void{
  if(animate){
      let stopInterval = setInterval(() => {
        if(speed.value > 0){
          speed.value --;
        }

        if(speed.value < 1){
          cancelAnimationFrame(animate);
          animate = null;
          clearInterval(stopInterval)
        }
      }, 100);


  }
}

/**
 * 加速
 */
function speedUp():void{
   if(speed.value < 1000){
    speed.value += 1;
   }
}

/**
 * 减速
 */
function slowDown():void{
  if(speed.value > 1){
    speed.value -= 1;
  }
}

/**
 * 旋转
 */
function rotate():void{
    if(drawingBoard.value){
        drawingBoard.value.rotate(speed.value);
    }

    animate = requestAnimationFrame(rotate);
}

defineExpose({start, stop, speedUp, slowDown})

onMounted(()=>{


});
watch(() => speed, (newVal) => {
    console.log(newVal.value)
},{
    deep: true
})


</script>
<template>
    <div class="rotate-drawing-board">
        <drawing-board ref="drawingBoard" />
    </div>
</template>
<style scoped lang="scss">

</style>
